<template>
  <div class="page">
    <div class="from">
      <div class="from-title">校园二手交易系统</div>
      <!-- 用户表单 -->
      <div class="container2-childer2">
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model.number="ruleForm2.username" placeholder="请输入用户名" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.number="ruleForm2.phone" placeholder="请输入手机号" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm2.pwd"
              autocomplete="off"
              maxlength="16"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm2.checkPass"
              autocomplete="off"
              maxlength="16"
              placeholder="请再次输入密码"
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm()">注册</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
          <!-- 找回密码 -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import remote from '@/utils/http'
import getHeader from '@/utils/header'

export default {
  name: 'Registered',
  data () {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 100)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码字母加数字'))
      } else {
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.ruleForm2.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm2.pwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      ruleForm2: {
        pwd: '', // 密码
        checkPass: '', // 检查密码
        username: '', // 用户名->手机号
        phone: ''
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        phone: [{ validator: checkPhone, trigger: 'blur' }]
      }
    }
  },
  created () {
    console.log()
  },
  methods: {
    // 点击注册后触发事件
    submitForm () {
      let that = this
      if (this.ruleForm2.username !== '' && this.ruleForm2.pwd !== '' && this.ruleForm2.phone !== '') {
        remote('registered', false, {name: this.ruleForm2.username, pwd: this.ruleForm2.pwd, phone: this.ruleForm2.phone})
          .then(data => {
            console.log(data)
            if (data.code === 0) {
              that.$message({
                message: data.message,
                type: 'success'
              })
              this.$router.push({path: './releasesucess'})
            } else {
              that.$message({
                message: data.message,
                type: 'error'
              })
            }
          })
      } else {
        this.message('请重新填写新信息')
      }
    },
    // 重置数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    earnpin () {
      alert('获取验证码')
    },
    // 找密码
    findpwd () {
      console.log('找密码')
    },
    tosign () {
      console.log('去注册')
    }
  }
}
</script>

<style scoped>
/* 验证码--------------------------------------------------- */
.pin {
  display: flex;
  font-size: 14px;
  color: #4f4f4f;
  height: 40px;
  line-height: 40px;
}
.pin-title {
  width: 22%;
}
.pin-right {
  border: 1px solid #cccccc;
  height: 40px;
  width: 260px;
}
.pin-input-ch {
  height: 36px;
  border: none;
  outline: medium;
}
/* ---------------------------------------------- */
.page {
  height: 100vh;
  width: 100vw;
  background-image: url("/static/images/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.from {
  width: 30%;
  text-align: center;
  margin: 1em auto;
  border-radius: 5px;
  background-color: #ffffff;
}
/deep/ .el-form-item {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: 100px;
}
/deep/ .el-form--label-left .el-form-item__label {
  text-align: center;
}
.from-title {
  text-align: center;
  padding: 0.5em 1em;
  font-size: 26px;
  color: #60b2fd;
  letter-spacing: 0.8rem;
  border-bottom: 1px solid #60b2fd;
}
.c3-findpwd {
  padding-right: 2rem;
}
</style>
